<template>
  <view class="swipeWrap">
    <view class="line-con">
      <img class="img" src="@/static/image/hmm/25.png" alt="" />
      <text class="line"></text>
    </view>
    <scroll-view
      class="scroll"
      scroll-x="true"
      :scroll-left="Left"
      @scroll="onScroll"
      @touchend="correct"
    >
      <view class="swipers">
        <view
          class="swiperItems"
          :class="{
            scale:
              !((props.min + props.base * index) % props.scale) ||
              props.min + props.base * index === props.min ||
              props.min + props.base * index === props.max
          }"
          v-for="(item, index) in count"
          :key="index"
        >
          <view class="lines"></view>
          <view
            class="num"
            v-if="
              !((props.min + props.base * index) % props.scale) ||
              props.min + props.base * index === props.min ||
              props.min + props.base * index === props.max
            "
          >
            {{ props.min + props.base * index }}
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, onMounted, onUpdated, watch } from 'vue'
import { debounce } from '@/utils/tools'

const Left = ref(0)
const oldLeft = ref(0)

// const props = reactive({
//   min: 0,
//   max: 100,
//   base: 1,
//   scale: 10,
//   value: 0
// })

const props = defineProps({
  // name: {
  //   type: String
  // },
  // unit: {
  //   type: String
  // },
  min: {
    default: 0
  },
  max: {
    default: 100
  },
  base: {
    default: 1
  },
  scale: {
    default: 10
  },
  value: {
    default: 0
  },
  init: {
    default: 0
  }
})

watch(
  () => props.init,
  (init) => {
    // console.log('init', init)
    nextTick(() => {
      Left.value = ((init - props.min) / props.base) * 8
      oldLeft.value = Left.value
    })
  },
  {
    immediate: true
  }
)
const emit = defineEmits(['update:value'])

const count = computed(() => {
  return Math.ceil(parseFloat(((props.max - props.min) / props.base + 1).toFixed(2)))
})

const correct = debounce(() => {
  Left.value = oldLeft.value

  nextTick(() => {
    Left.value = Math.round(oldLeft.value / 8) * 8
    oldLeft.value = Left.value
  })
}, 150)

const onScroll = (e) => {
  oldLeft.value = e.target.scrollLeft
  // oldLeft.value = Math.round(e.target.scrollLeft / 8) * 8

  const several = props.base.toString().split('.')[1]
    ? props.base.toString().split('.')[1].length
    : 0

  emit(
    'update:value',
    props.min + (props.base * Math.round(e.target.scrollLeft / 8)).toFixed(several) * 1
  )
}
</script>

<style lang="scss" scoped>
.scroll {
  max-width: 750rpx;
  width: 100%;
}
.swipers {
  padding: 0 calc(50% - 4px);
  height: 128rpx;
  display: inline-flex;
  flex-direction: row;
  overflow: visible;
}
.swiperItems {
  flex: 0 0 auto;
  width: 8px;
  height: 22rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  .lines {
    width: 1px;
    height: 22rpx;
    background: #dfdfdf;
  }
}
.scale {
  height: 122rpx;
  .lines {
    width: 1px;
    height: 50rpx;
    background: #c6c6c6;
  }
  .num {
    font-size: 32rpx;
    color: #222;
  }
}
.swipeWrap {
  background: #f8f8f8;
  // background: greenyellow;
  // margin: 0 30rpx;
  padding-bottom: 16rpx;
  ::v-deep .line-con {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .line {
      position: absolute;
      width: 1rpx;
      height: 50rpx;
      top: 0rpx;
      background: #00d1b6;
      z-index: 6;
    }
    .img {
      position: absolute;
      top: -2rpx;
      z-index: 6;
      width: 34rpx;
      height: 14rpx;
    }
  }
}
</style>
